<template>
	<view class="content">
		<view class="headimg" @click="uploadImg()">
			<image :src="avatar" mode=""></image>
			<view class="xiangji"></view>
		</view>
		<view class="list">
			<view class="child flexbetween">
				<view class="name">昵称</view>
				<input type="text" maxlength="12" placeholder="请输入昵称" v-model="nickname">
			</view>
			<view class="btn" @click="qrxiugai">保存</view>
			<!-- 二次确认修改信息 -->
			<!-- <u-modal :show="show" :title="title" showCancelButton="true" confirmColor="#ff750e" @confirm="confirm" @cancel="cancel"></u-modal> -->
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				nickname: "",
				upImg:[],
				avatar:""
			}
		},
		onLoad() {
			this.getuserInfo()
		},
		methods: {
			qrxiugai() { //修改个人信息
				let _this = this;
				if (_this.nickname == '') {
					httpRequest.toast('请输入昵称')
					return
				}
				httpRequest.request('/api/user/editInfo', 'GET', {
					nickname: _this.nickname, //昵称
					avatar: _this.avatar, //头像
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg)
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					} else {
						httpRequest.toast(res.msg)
					}
					console.log(res);

				})
			},
			getuserInfo() { //获取个人信息
				let _this = this;
				httpRequest.request('/api/user/index', 'POST', {}).then(res => {
					if (res.code == 1) {
						_this.nickname = res.data.nickname; //昵称
						_this.avatar=res.data.avatar_text; //头像
					}
				})
			},
			uploadImg() {
				let _this = this;
				let upImgs = _this.upImg;
				let num = 6 - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					_this.avatar=res.fullurl
				}).catch(err => {});
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-safe-area-inset-bottom {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);

	}

	.pops {
		padding: 0 60rpx 60rpx;

		.title {
			text-align: center;
			font-size: 36rpx;
			color: #000000;
			padding: 40rpx 0;
		}

		.lists {
			.sex {
				text-align: center;
				margin: 20rpx 0;
				color: #999999;
			}

			.sexs {
				color: #FF7510;
				text-align: center;
				margin: 20rpx 0;
			}
		}

		.submits {
			// background-image: linear-gradient(to right, #42CD5A, #55C900);
			background-color: #FF7510;
			border-radius: 40rpx;
			text-align: center;
			padding: 20rpx 0;
			color: #FFFFFF;
			font-size: 32rpx;
			margin: 30rpx 0rpx 0rpx 0rpx;
		}
	}


	.headimg {
		width: 180rpx;
		height: 180rpx;
		margin: 0 auto;
		padding-top: 40rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.xiangji {
			width: 52rpx;
			height: 52rpx;
			position: absolute;
			bottom: 0;
			right: 0;
			background-size: 100% 100%;
			background-image: url('/static/image/my/phone.png');
		}
	}


	.list {
		//margin: 30rpx 20rpx;
		margin-top: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;

		.child {
			padding: 30rpx 0;

			.name {
				font-size: 32rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #333333;
			}

			.data {
				.gerenxxyjt {
					width: 10rpx;
					height: 18rpx;
					margin-left: 10rpx;
					background-size: 100% 100%;
					background-image: url('/static/image/my/phone.png');
				}

				.xingbie {
					color: #333333;
					font-size: 28rpx;
				}
			}

			input {
				text-align: right;
				color: #333333;
				font-size: 28rpx;
			}
		}
	}


	.btn {
		position: fixed;
		bottom: 50rpx;
		width: 90vw;
		color: #fff;
		background-color: #d48b39;
		padding: 20rpx 0;
		text-align: center;
		border-radius: 44rpx;
		z-index: 100;
		margin: 30rpx 20rpx;
	}

	input {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}
</style>